
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../lib/animate.css"/>
		<!-- 2.自定义两组样式来控制 -->
		<style type="text/css">
			/* v-enter 【这是一个时间点】 进入前元素初始状态*/
			/* v-leave-to 动画离开之后，离开的终止状态，此时元素动画已经结束了 */
			.v-enter,
			.v-leave-to{
				opacity: 0;
				transform: translateX(150px);
			}
			/*  v-enter-active 入场动画的时间段*/
			/*  v-leave-active 离场动画的时间段*/
			.v-enter-active,
			.v-leave-active{
				transition: all 1s ease;
				/* 可定义的属性有：
					transition-property：设置那些属性进行过渡，all：所有属性
					transition-duration：完成过渡动画效果的时间，默认是0
					transition-timing-function：设置动画的缓动效果，默认是ease（逐渐变慢）。
					（其他常用值：ease-in，加速；ease-out，减速；ease-in-out，加速然后减速)
					transition-delay：设置动画开始的延迟时间，默认是0 */
			}
			/* 自定义前缀 */
			.my-enter,
			.my-leave-to{
				opacity: 0;
				transform: translateX(150px);
			}
			.my-enter-active,
			.my-leave-active{
				transition: all 1s ease;
			}
			
			.ball{
				width: 15px;
				height: 15px;
				border-radius: 50%;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 需求 点击按钮让h3显示，再点击，隐藏-->
			<input type="button" value="toggle" @click="flag=!flag" />
			<!-- 1.使用transition元素，把需要被动画控制的元素包裹起来 -->
			<!-- transition是Vue官方提供的 -->
			<transition appear="">
				<h3>这是一个H3</h3>
			</transition>
			<input type="button" value="toggle" @click="flag2=!flag2" />
			<transition name="my">
				<h3 v-if="flag2">这是一个H6</h3>
			</transition>
			<input type="button" value="toggle" @click="isshow=!isshow" />
			<!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
			<!-- <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
			  <h3 v-if="flag">这是一个H3</h3>
			</transition> -->
			
			<!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 -->
			<!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="200">
			  <h3 v-if="flag" class="animated">这是一个H3</h3>
			</transition> -->
			
			<!-- 使用  :duration="{ enter: 200, leave: 400 }"  来分别设置 入场的时长 和 离场的时长  -->
			<!-- <transition enter-active-class="bounceIn" leave-active-class="bounceOut" :duration="{ enter: 200, leave: 400 }">
			  <h3 v-if="isshow" class="animated">这是一个H3</h3>
			</transition> -->
	<!-- 		<transition
				enter-active-class="fadeInRight"
			    leave-active-class="fadeOutRight"
			    :duration="{ enter: 500, leave: 800 }">
			  	<div class="animated" v-show="isshow">动画哦</div>
			</transition> -->
			<transition enter-active-class="fadeInRight" leave-active-class="fadeOutRight" :duration="{enter:500,leave:800}">
				<h3 class="animated" v-if="isshow">成功完成</h3>
			</transition>
			<!-- 使用钩子函数模拟小球半场动画 -->
			<!-- transition
			v-on:before-enter="beforeEnter"
			v-on:enter="enter"
			v-on:after-enter="afterEnter"
			v-on:enter-cancelled="enterCancelled"

            v-on:before-leave="beforeLeave"
			v-on:leave="leave"
			v-on:after-leave="afterLeave"
			v-on:leave-cancelled="leaveCancelled"
			>
</transition> -->
			<input type="button"  value="快到碗里来" @click="flag3=!flag3"/>
			<transition
				@before-enter="beforeEnter"
				@enter="enter"
				@after-enter="afterEnter"><!-- 1、使用transition把小球包裹起来 -->
				<div class="ball" v-show="flag3"></div>
				
			</transition>
			
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					flag:false,
					flag2:false,
					isshow:false,
					flag3:false
				},
				methods:{
					//注意：el表示要执行动画的DOM元素，是个原生的JS DOM对象
					//可以认为el是通过document.getElementById('')方式获取的原生JS DOM对象
				beforeEnter(el){
				  // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
				  // 设置小球开始动画之前的，起始位置
				  el.style.transform = "translate(0, 0)";
				  
				},
				enter(el, done){
				  // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
				  // 可以认为 el.offsetWidth 会强制动画刷新
				  el.offsetWidth
				  // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
				  el.style.transform = "translate(150px, 450px)"
				  el.style.transition = 'all 1s ease'
				
				  // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
				  done()
				},
				afterEnter(el){
				  // 动画完成之后，会调用 afterEnter
				  // console.log('ok')
				  this.flag3 = !this.flag3;
				}
				}
			})
		</script>
	</body>
	
</html>
